<template>
	<view class="content">
		<view class="toAdd" @click="toAdd">
			<uniIcon type='plus'></uniIcon><text class="adText">添加银行卡</text>
		</view>
		<block v-if="cards.length">
			<view class="cardItem" v-for="(item,index) in cards" :key="index" @click="modifyCard(item)">
				<view class="bankName">
					{{item.bankName}}
				</view>
				<view class="cardNo">
					<text class="firstFour">{{item.firstFour}}</text>
					<text class="secret"></text>
					<text class="secret"></text>
					<text>{{item.lastFour}}</text>
				</view>
			</view>
		</block>

		<empty v-else emptyText="你尚未添加银行卡" bgc="#fff"></empty>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icons/uni-icons"
	import empty from '@/components/empty.vue'
	import {
		userBankCard
	} from "@/common/loadUserInfo.js"
	export default {
		components: {
			uniIcon,
			empty
		},
		data() {
			return {
				hasCard: true,
				cards: []
			};
		},
		onShow() {
			this.loadCard();
		},
		methods: {
			loadCard() {
				this.cards=[]
				let that = this
				userBankCard({
					success: (res) => {
						let cards = res.data
						cards.forEach(item => {
							item.firstFour = item.accNo.substr(0, 4)
							item.lastFour = item.accNo.substr(-4, 4)
							this.cards.push(item)
						})
					}
				})
			},
			modifyCard(item){
				uni.navigateTo({
					url: '/subPackage/addCard/addCard?card='.concat(JSON.stringify(item))
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/subPackage/addCard/addCard'
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
	}

	.toAdd {
		margin-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		font-size: $uni-font-size-base;

		.adText {
			padding-left: 0.5em;
		}
	}

	.cardItem {
		background-color: #1a65a3;
		width: 660rpx;
		height: 300rpx;
		border-radius: 30rpx;
		box-shadow: 0 0 5rpx rgba(#1a65a3, 0.6);
		margin: 20rpx auto;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;

		.bankName {
			@include textCenter(60rpx);
			text-align: left;
			font-size: $uni-font-size-lg;
		}

		.cardNo {
			@include textCenter(60rpx);
			text-align: left;
			font-size: 40rpx;

			.firstFour {
				padding-right: 1em;
			}

			.secret {
				padding-right: 1em;

				&::after {
					content: '****';
				}
			}
		}
	}
</style>
